<template>
    <el-container class="home_container">
        <!-- 左侧侧边栏 -->
        <el-aside :width="isCollapse ? '68px' : '200px'">
            <!-- 左侧主页logo区域 -->
            <div class="home_logo_box" @click="logoHome">
                <img src="../assets/home_logo.png" alt="">
                <span v-if="!isCollapse">电商后台管理系统</span>
            </div>
            <!-- 左侧菜单 -->
            <transition name="el-zoom-in-center">
                <el-menu background-color="rgb(48, 65, 86)" text-color="#fff"
                    :default-active="activePath ? activePath : '/home'" active-text-color="rgb(64, 158, 255)"
                    :collapse="isCollapse" :collapse-transition="false" unique-opened router>
                    <!-- 首页 -->
                    <el-menu-item index="/home" @click="saveActivePath('/home')">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <!-- 一级菜单 -->
                    <el-submenu :index="menu.id + ''" :key="menu.id" v-for="menu in menuList">
                        <!-- 一级菜单的模板 -->
                        <template slot="title">
                            <i :class="menuIcon[menu.id]"></i>
                            <span>{{ menu.authName }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item :index="'/' + menuItem.path" :key="menuItem.id" v-for="menuItem in menu.children"
                            @click="saveActivePath('/' + menuItem.path)">
                            <!-- 二级菜单下的选项的模板 -->
                            <template slot="title">
                                <i :class="menuIcon[menuItem.id]"></i>
                                <span>{{ menuItem.authName }}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                    <!-- 作者博客 -->
                    <el-menu-item @click="saveActivePath('/ayBlog')">
                        <i class="el-icon-s-promotion"></i>
                        <span slot="title">作者博客</span>
                    </el-menu-item>
                </el-menu>
            </transition>
        </el-aside>
        <!-- 右侧主体区域 -->
        <el-container>
            <!-- 右侧主体区域头部 -->
            <el-header>
                <!-- 侧边栏菜单折叠按钮 -->
                <div class="collapseIcon" @click="collapse">
                    <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                </div>
                <!-- 退出 -->
                <el-button type="info" @click="signOut">退出</el-button>
            </el-header>
            <!-- 右侧主体区域主体 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            // 菜单列表
            menuList: [],
            // 菜单图标对象
            menuIcon: {
                '125': 'el-icon-user', // 用户管理
                '103': 'el-icon-s-check', // 权限管理
                '101': 'el-icon-shopping-bag-1', // 商品管理
                '102': 'el-icon-s-claim', // 订单管理
                '145': 'el-icon-data-line', // 数据统计
                '110': 'el-icon-user-solid', // 用户列表
                '111': 'el-icon-s-custom', // 角色列表
                '112': 'el-icon-menu', // 权限列表
                '104': 'el-icon-tickets', // 商品列表
                '115': 'el-icon-edit-outline', // 分类参数
                '121': 'el-icon-s-grid', // 商品分类
                '107': 'el-icon-s-order', // 订单列表
                '146': 'el-icon-data-analysis', // 数据报表
            },
            // 是否折叠菜单
            isCollapse: false,
            // 激活的菜单路径
            activePath: ''
        }
    },
    // 生命周期钩子（在页面创建时触发）
    created() {
        // 获取左侧菜单列表数据
        this.getMenuList();
        // 激活菜单路径
        this.activePath = window.sessionStorage.getItem('activePath');
    },
    methods: {
        // 退出
        signOut() {
            // 清空token
            window.sessionStorage.clear();
            // 编程式导航强制跳转到登录页
            this.$router.push('/login');
        },
        // 获取左侧菜单列表数据
        async getMenuList() {
            const { data: res } = await this.$http.get('menus');
            if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
            this.menuList = res.data;
        },
        // 点击logo区域回到首页
        logoHome() {
            this.$notify.success({
                title: '别点啦，没做功能！',
                message: '作者：啊炎同学 www.h1234.top',
                duration: 5000
            })
        },
        // 侧边栏菜单折叠
        collapse() {
            this.isCollapse = !this.isCollapse;
        },
        // 保存激活的菜单路径
        saveActivePath(activePath) {
            if (activePath === '/home') {
                window.sessionStorage.setItem('activePath', '/home');
                this.activePath = '/home';
            } else if (activePath === '/ayBlog') {
                window.sessionStorage.setItem('activePath', '/ayBlog');
                this.activePath = '/ayBlog';
                // 新标签页打开作者博客
                window.open('http://www.h1234.top/');
            } else {
                window.sessionStorage.setItem('activePath', activePath);
                this.activePath = activePath;
            }
        },
    }
}
</script>

<style lang="less" scoped>
// home主页
.home_container {
    height: 100%;
}

// 左侧侧边栏
.el-aside {
    background-color: rgb(48, 65, 86);
    overflow: hidden;
}

// 右侧主体区域头部
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: Transparent;
    border-bottom: 2px solid #eee;
}

// 主页logo区域
.home_logo_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    cursor: pointer;
}

.home_logo_box img {
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.home_logo_box span {
    font-size: 14px;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

// 左侧菜单
.el-menu {
    border-right: 0;
}

// 侧边栏菜单折叠按钮
.collapseIcon i {
    font-size: 20px;
}
</style>
